<template>
  <div class="page">
    <mu-appbar style="width: 100%;" color="primary">
      <mu-button flat slot="left" @click="record_cancel">取消</mu-button>
      <mu-button flat slot="right" @click="clear()">清除</mu-button>
    </mu-appbar>
    <!-- 文本输入框 -->
    <div class="input-box">
      <mu-text-field v-model="InputText" :placeholder="tips" multi-line :rows="5"
                     full-width></mu-text-field>
    </div>
    <!-- 上传图片的地方 -->
    <div class="upload">
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :list-type="upload_type" :limit="upload_limit"
        :file-list="file_list" :on-exceed="exceed">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>

    <div class="submit">
      <mu-button full-width color="primary">发表</mu-button>
    </div>

  </div>
</template>

<script>
  import Img from '@/assets/1000578.jpg'

  export default {
    name: "SuiShouJi",
    data() {
      return {
        InputText: '',
        tips: '随手记录你的生活,发现更多美好',
        img: Img,
        dialogImageUrl: '',
        dialogVisible: false,
        upload_limit: 1,
        upload_type: 'picture-card',
        file_list: []
      }
    },
    methods: {
      clear() {
        this.InputText = "";
        this.file_list = [];
      },
      exceed(){
        this.$toast.error('最多上传三个图片')
      },
      record_cancel(){
        this.$router.push({path:'/'})
      }
    }
  }
</script>

<style scoped>
  .page {
    width: 100%;
    height: 100vh;
  }

  .input-box {
    width: 90%;
    height: auto;
    margin: 10px auto;
  }

  .submit {
    width: 80%;
    height: auto;
    margin: 30px auto;
  }

  .upload {
    width: 90%;
    height: auto;
    margin: 0 auto;
  }

  .upload img {
    width: 100%;
    height: 100%;
  }
</style>
